<template>
  <el-container>
    <el-aside style="width: 200px;margin-top: 20px">
      <switch></switch>
      <sidemenu class="side"  v-on:listenToSideMenu="show" ></sidemenu>
    </el-aside>
    <el-main>
      <div class="find">
        <el-input placeholder="请输入书名查询" v-model="input3" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="科技" value="科技"></el-option>
            <el-option label="文学" value="文学"></el-option>
            <el-option label="文化" value="文化"></el-option>
            <el-option label="生活" value="生活"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" v-on:click="findBy_title"></el-button>
        </el-input>
      </div>
      <books class="book" v-bind:table="table"></books>
      <div id="page" style="margin-top: 200px">
        <el-pagination
          @current-change="handleSizeChange"
          background
          page-size="20"
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import sidemenu from '@/components/library/SideMenu'
import books from './Books'
export default {
  name: 'LibraryIndex',
  data () {
    return {
      table: [],
      input3: '',
      select: '',
      total: '',
      TotalData: []
    }
  },
  components: {sidemenu, books},
  methods: {
    show:function (data) {
      console.log(data)
      this.table = []
      for (var i=0;i<data.length;i++) {
        this.TotalData.push(data[i])
      }
      if (data.length < 20){
        for (var i=0;i<data.length;i++){
          this.table.push(data[i])
        }
      }else {
        for (var i=0;i< 20;i++){
          this.table.push(data[i])
        }
      }
      this.total = data.length
    },
    findBy_title () {
      this.$axios
        .post('/findBy_book',{
          title: this.input3,
          type: this.select
        })
        .then(successResponse => {
          this.table =[]
          this.table.push(successResponse.data)
        })
    },
    handleSizeChange (val) {
      this.table = []
      if (this.total < val*20){
        for (var i = (val-1)*20;i < this.total;i++){
          this.table.push(this.TotalData[i])
        }
      } else {
        for (var i = (val-1)*20;i < val*20;i++){
          this.table.push(this.TotalData[i])
        }
      }
    }
  }
}
</script>

<style scoped>
.side{
  margin-left: 20px;
}
.book{
  margin-left: 20px;
  margin-top: 75px;
}
.el-select {
  width: 100px;
}
.el-input {
  width: 600px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.find {
   margin-top: 25px;
}
</style>
